<template>
  <view class="booking-detail-page">
    <u-navbar
      bgColor="transparent"
      autoBack
      :bgColor="bgColor"
      :leftIconColor="leftIconColor"
    >
      <view class="u-nav-slot" slot="center" style="font-weight: 500">
        场馆预约
      </view>
    </u-navbar>
    <view v-show="info.ticOtherBaseId">
      <view class="top">
        <image class="top-image" :src="img_api + info.topImage"></image>
        <view class="shadow">
          <view class="title u-line-1">{{ info.name }}</view>
          <view class="intro">
            <view class="left">
              <view class="overview" @click="show = true">
                <view>场馆详情</view>
                <image
                  class="icon-arrow-right"
                  src="https://ltjt.sjzballsportpark.com/statics/tyc/static/home/img8.png"
                ></image>
              </view>
              <view class="adr">
                <image
                  src="https://ltjt.sjzballsportpark.com/statics/tyc/static/booking/img10.png"
                ></image>
                <view class="adr-text u-line-1">{{ info.addressDetails }}</view>
              </view>
            </view>
            <view class="right">
              <view class="phone-nav phone" @click="callPhone">
                <view class="line"></view>
                <view class="text">联系</view>
                <image
                  class="icon"
                  src="https://ltjt.sjzballsportpark.com/statics/tyc/static/booking/img11.png"
                ></image>
              </view>
              <view class="phone-nav nav" @click="openNav" v-if="false">
                <view class="line"></view>
                <view class="text">导航</view>
                <image
                  class="icon"
                  src="https://ltjt.sjzballsportpark.com/statics/tyc/static/booking/img12.png"
                ></image>
              </view>
            </view>
          </view>
        </view>
        <view class="popup-content-shadow" v-if="false">
          <view class="popup-content">
            <view class="title">{{ info.name }}</view>
            <view class="adr-box">
              <view class="adr-info">
                <view class="h2">{{ info.addressDetails }}</view>
                <view class="p" v-if="false">距您{{ info.distance }}km</view>
              </view>
              <view class="phone-nav nav" v-if="false" @click="openNav">
                <view class="line"></view>
                <view class="text">导航</view>
                <image
                  class="icon"
                  src="https://ltjt.sjzballsportpark.com/statics/tyc/static/booking/img12.png"
                ></image>
              </view>
            </view>
            <view class="phone-box">
              <view class="phone-info">
                <view class="h2"
                  >电话 <text>{{ info.venuesPhone || "" }}</text></view
                >
              </view>
              <view class="phone-nav phone" @click="callPhone">
                <view class="line"></view>
                <view class="text">联系</view>
                <image
                  class="icon"
                  src="https://ltjt.sjzballsportpark.com/statics/tyc/static/booking/img11.png"
                ></image>
              </view>
            </view>
            <view class="u-content" scroll-y v-if="info.introduceDetails">
              <u-parse :content="info.introduceDetails"></u-parse>
            </view>
          </view>
        </view>
      </view>
      <block v-if="info.ticVenuesFrontDetailTimeList.length > 0">
        <u-sticky :offsetTop="offsetTop">
          <scroll-view scroll-x class="date-tabs">
            <view
              class="date-tab"
              :class="{ active: item.venuesDate === selectedTourTime }"
              v-for="item in info.ticVenuesFrontDetailTimeList"
              @click="changeDate(item)"
              :key="item.venuesDate"
            >
              <view class="day">{{ item.day }}</view>
              <view class="m-w">
                <view class="month">{{ item.month }}</view>
                <view class="week">{{ item.weekDays }}</view>
              </view>
            </view>
          </scroll-view>
        </u-sticky>
        <view class="time-list">
          <view
            class="time-item"
            :class="{
              disabled: item.status == 1,
              full: item.status == 2,
              selected: item.num > 0,
            }"
            v-for="(item, index) in voList"
            :key="index"
          >
            <view class="left">
              <view class="st"> {{ item.periodTimeStart }} </view>
              <view class="ed">
                <view class="zhi">至</view>
                <view class="ed-text"> {{ item.periodTimeEnd }} </view>
              </view>
            </view>
            <view class="right">
              <view class="time-info">
                <block v-if="item.status != 1">
                  <block v-if="item.status == 2">
                    <view
                      class="has-reversed"
                      v-if="item.userIdReservationCount > 0"
                    >
                      我已约
                      <text>{{ item.userIdReservationCount }}</text>
                    </view>
                  </block>
                  <block v-else>
                    <view class="price"
                      ><text> ¥ </text> {{ item.periodPrice }}</view
                    >
                    <view
                      style="
                        display: flex;
                        align-items: center;
                        margin-top: 12rpx;
                      "
                    >
                      <view class="website"
                        ><text> {{ item.periodStockResidue }} </text> 余位</view
                      >
                      <view
                        class="has-reversed"
                        v-if="item.userIdReservationCount > 0"
                      >
                        我已约
                        <text>{{ item.userIdReservationCount }}</text>
                      </view>
                    </view>
                  </block>
                </block>
              </view>
              <view>
                <view class="btn" v-if="item.status == 2"> 已约满 </view>
                <view class="btn" v-if="item.status == 1"> 已过期 </view>
                <view
                  class="btn"
                  @click="itemClick(item)"
                  v-if="item.status == 0 && item.num === 0"
                >
                  可预约
                </view>
                <number-box
                  v-if="item.status == 0 && item.num > 0"
                  :min="0"
                  :max="
                    item.periodStockResidue > info.limitPurchaseNum
                      ? info.limitPurchaseNum
                      : item.periodStockResidue
                  "
                  :disabled="false"
                  v-model="item.num"
                  :buttonSize="64"
                />
              </view>
            </view>
          </view>
        </view>
        <view class="confirm-btn-box">
          <view
            class="btn"
            @click="confirmReserve"
            :class="{ disable: disableBtn }"
            >确认预约</view
          >
        </view>
      </block>
    </view>

    <u-popup
      :show="show"
      mode="bottom"
      :closeOnClickOverlay="false"
      round="40rpx"
      :safeAreaInsetBottom="false"
    >
      <view class="popup-content">
        <view class="title">{{ info.name }}</view>
        <view class="adr-box">
          <view class="adr-info">
            <view class="h2">{{ info.addressDetails }}</view>
            <view class="p" v-if="false">距您{{ info.distance }}km</view>
          </view>
          <view class="phone-nav nav" v-if="false" @click="openNav">
            <view class="line"></view>
            <view class="text">导航</view>
            <image
              class="icon"
              src="https://ltjt.sjzballsportpark.com/statics/tyc/static/booking/img12.png"
            ></image>
          </view>
        </view>
        <view class="phone-box">
          <view class="phone-info">
            <view class="h2"
              >电话 <text>{{ info.venuesPhone || "" }}</text></view
            >
          </view>
          <view class="phone-nav phone" @click="callPhone">
            <view class="line"></view>
            <view class="text">联系</view>
            <image
              class="icon"
              src="https://ltjt.sjzballsportpark.com/statics/tyc/static/booking/img11.png"
            ></image>
          </view>
        </view>
        <scroll-view
          class="u-content"
          scroll-y
          style="max-height: 400rpx"
          v-if="info.introduceDetails"
        >
          <u-parse
            :content="info.introduceDetails"
            :tagStyle="parseStyle"
          ></u-parse>
        </scroll-view>
        <view class="close-box" @click="show = false">关闭</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import numberBox from "@/components/number-box.vue";
import { getBookingDetail } from "@/config/api";
import { Decimal } from "decimal.js-light";
export default {
  components: {
    numberBox,
  },
  props: ["id"],
  data() {
    return {
      scrollTop: 0,
      show: false,
      info: {},
      voList: [], //可选票重数组
      selectedTourTime: "", //选中的日期
    };
  },
  computed: {
    bgColor() {
      return this.scrollTop > 100 ? "#ffffff" : "transparent";
    },
    leftIconColor() {
      return this.scrollTop > 100 ? "#303133" : "#303133";
    },
    offsetTop() {
      return uni.$u.sys().statusBarHeight + 44;
    },
    totalPrice() {
      let sum = this.voList.reduce(
        (accumulator, currentValue) => {
          return (
            new Decimal(currentValue.periodPrice)
              // .div(100)
              .mul(currentValue.num)
              .add(accumulator)
              .toNumber()
          );
        },
        // accumulator + currentValue.periodPrice * currentValue.num,
        0
      );
      return sum.toFixed(2);
    },
    contTickerNumber() {
      let sum = this.voList.reduce(
        (accumulator, currentValue) => accumulator + currentValue.num,
        0
      );
      console.log(sum);
      return sum;
    },
    disableBtn() {
      return this.voList.length === 0;
    },
  },
  watch: {
    token() {
      this.getDetail();
    },
  },
  onShow() {
    // TODO 比对时间
  },
  onLoad() {
    if (this.id) {
      this.getDetail();
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  methods: {
    getDetail() {
      getBookingDetail(
        {
          otherBaseType: 3,
          ticOtherBaseId: this.id,
          venuesDate: this.selectedTourTime,
        },
        {
          custom: {
            auth: !!this.token,
          },
        }
      ).then((res) => {
        if (res.code === 200) {
          const detail = res.data || {};
          detail.topImage = (detail.imgList || [])[0]?.attaPath || "";
          detail.ticVenuesFrontDetailTimeList =
            detail.ticVenuesFrontDetailTimeList || [];
          let voList = detail.ticVenuesPeriodFrontList || [];
          voList.forEach((item) => {
            item.num = 0;
            item.periodTimeStart = item.periodTimeStart?.substring(0, 5);
            item.periodTimeEnd = item.periodTimeEnd?.substring(0, 5);
          });
          this.voList = voList;
          this.selectedTourTime =
            this.selectedTourTime ||
            detail.ticVenuesFrontDetailTimeList[0]?.venuesDate;
          this.info = detail;
        }
      });
    },
    changeDate(item) {
      if (this.selectedTourTime === item.venuesDate) return;
      this.selectedTourTime = item.venuesDate;
      this.getDetail();
    },
    itemClick(item) {
      item.num += 1;
    },
    // 拨打电话
    callPhone() {
      this.toURL(this.info.venuesPhone, {}, { type: "phone" });
    },
    openNav() {},
    //     确认下单
    confirmReserve() {
      if (this.voList.length == 0) {
        return;
      }
      if (this.contTickerNumber == 0) {
        uni.showToast({
          title: "至少选中一个时间点",
          icon: "none",
        });
        return;
      }
      // 判断是否登录
      if (!this.token) {
        uni.navigateTo({
          url: "/pages/login/index",
        });
        return;
      }
      this.$store.commit("TICKET_RESERVE_INFO", {
        voList: this.voList.filter((item) => item.num > 0),
        time: this.info.ticVenuesFrontDetailTimeList.find(
          (item) => item.venuesDate === this.selectedTourTime
        ),
        detail: this.info,
        totalPrice: this.totalPrice,
      });
      uni.navigateTo({
        url: `/page_index/booking-detail/goBuy?id=${this.id}`,
      });
    },
  },
};
</script>

<style lang="scss">
.booking-detail-page {
  position: relative;
  min-height: 100vh;
  background-color: #fff;
  .phone-nav {
    display: flex;
    align-items: center;
    .line {
      width: 2rpx;
      height: 24rpx;
      background-color: rgba(255, 80, 0, 0.502);
      margin-right: 32rpx;
    }
    .text {
      font-size: 28rpx;
      font-weight: 500;
      color: #ff5000;
      line-height: 40rpx;
      margin-right: 8rpx;
    }
    .icon {
      display: block;
      width: 32rpx;
      height: 32rpx;
    }
  }
  .top {
    position: relative;
    .top-image {
      display: block;
      width: 100%;
      height: 480rpx;
    }
    .shadow {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 110rpx 32rpx 24rpx;
      width: 750rpx;
      height: 304rpx;
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.8) 39%,
        #ffffff 64%,
        #ffffff 100%
      );
      opacity: 1;
      .title {
        font-size: 36rpx;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.9);
        line-height: 50rpx;
      }
      .intro {
        margin-top: 16rpx;
        display: flex;
        .left {
          flex: 1;
          margin-right: 30rpx;
          .overview {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.7);
            line-height: 40rpx;
            image {
              margin-left: 8rpx;
            }
          }
          .adr {
            margin-top: 24rpx;
            display: flex;
            align-items: center;
            image {
              display: block;
              width: 32rpx;
              height: 32rpx;
              margin-right: 8rpx;
            }
            .adr-text {
              flex: 1;
              font-size: 28rpx;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.7);
              line-height: 40rpx;
            }
          }
        }
        .right {
          flex-shrink: 0;

          .nav {
            margin-top: 24rpx;
          }
        }
      }
    }
  }
  .date-tabs {
    width: 100%;
    white-space: nowrap;
    height: 200rpx;
    background: linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 80%,
      rgba(255, 255, 255, 0) 100%
    );
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    padding-top: 32rpx;
    box-sizing: border-box;
    .date-tab {
      display: inline-block;
      margin-left: 24rpx;
      width: 140rpx;
      height: 120rpx;
      background: #ffffff;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 12rpx 16rpx 12rpx 16rpx;

      .day {
        font-size: 40rpx;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.9);
        line-height: 56rpx;
      }
      .m-w {
        margin-top: 4rpx;
        padding-top: 4rpx;
        border-top: 1px solid #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .month {
        font-size: 24rpx;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.5);
        line-height: 32rpx;
      }
      .week {
        font-size: 24rpx;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.5);
        line-height: 32rpx;
      }
      &:first-child {
        margin-left: 32rpx;
      }
      &:last-child {
        margin-right: 32rpx;
      }
      &.active {
        background: #ff5000;
        box-shadow: 0rpx 10rpx 24rpx -10rpx rgba(255, 113, 58, 0.25);
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        .day {
          color: #fff201;
        }
        .m-w {
          //opacity: 0.3;
          border-top: 1px solid rgba(255, 255, 255, 0.3);
        }
        .month {
          color: rgba(255, 255, 255, 0.6);
        }
        .week {
          color: #ffffff;
        }
      }
    }
  }
  .time-list {
    padding: 0 32rpx;
    padding-bottom: calc(120rpx + env(safe-area-inset-bottom) + 50rpx);
  }
  .time-item {
    height: 144rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    margin-bottom: 16rpx;
    .left {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 180rpx;
      height: 100%;
      border-top-left-radius: 16rpx;
      border-bottom-left-radius: 16rpx;
      background-color: #fff;
    }
    .st {
      font-size: 48rpx;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.9);
      line-height: 68rpx;
    }
    .ed {
      margin-top: 4rpx;
      display: flex;
      align-items: center;
      .zhi {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32rpx;
        height: 32rpx;
        background: rgba(255, 113, 58, 0.1);
        border-radius: 2rpx 2rpx 2rpx 2rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #ff5000;
        margin-right: 10rpx;
      }
      .ed-text {
        font-size: 28rpx;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.5);
        line-height: 40rpx;
      }
    }
    .right {
      border-left: 2rpx solid rgba(0, 0, 0, 0.05);
      flex: 1;
      display: flex;
      align-items: center;
      padding: 0 32rpx;
      height: 100%;
    }
    .has-reversed {
      display: inline-flex;
      background: rgba(255, 113, 58, 0.1);
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.9);
      line-height: 34rpx;
      padding: 0 8rpx;
      border-radius: 2rpx 2rpx 2rpx 2rpx;
      text {
        color: #ff5000;
        margin-left: 8rpx;
      }
    }
    .price {
      display: flex;
      align-items: center;
      font-size: 36rpx;
      font-family: D-DIN-Bold;
      font-weight: 400;
      color: #ff5000;
      line-height: 40rpx;
    }
    .website {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 34rpx;
      margin-right: 32rpx;
      text {
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
        margin-right: 4rpx;
      }
    }
    .time-info {
      flex: 1;
      margin-right: 32rpx;
    }
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 132rpx;
      height: 56rpx;
      background: #ff5000;
      border-radius: 28rpx 28rpx 28rpx 28rpx;
      opacity: 1;
      font-size: 28rpx;
      font-weight: 600;
      color: #ffffff;
      line-height: 40rpx;
    }

    &.disabled {
      background: #f9f7f6
        url("https://ltjt.sjzballsportpark.com/statics/tyc/static/booking/img13.png")
        no-repeat 0 0;
      background-size: 100% 100%;
      .st {
        color: rgba(0, 0, 0, 0.3);
      }
      .ed {
        .zhi {
          opacity: 0.3;
        }
        .ed-text {
          color: rgba(0, 0, 0, 0.3);
        }
      }
      .btn {
        color: rgba(0, 0, 0, 0.3);
        background: transparent;
      }
    }
    &.full {
      background: #f9f7f6
        url("https://ltjt.sjzballsportpark.com/statics/tyc/static/booking/img13.png")
        no-repeat 0 0;
      background-size: 100% 100%;
      .btn {
        color: rgba(0, 0, 0, 0.9);
        background: transparent;
      }
    }
    &.selected {
      background: rgba(255, 80, 0, 0.102);
      border: 2rpx solid #ff5000;
    }
  }
  .confirm-btn-box {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0rpx 14rpx 58rpx 0rpx rgba(100, 100, 111, 0.2);
    box-sizing: content-box;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    align-items: center;
    justify-content: center;
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 686rpx;
      height: 80rpx;
      background: #ff5000;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: #ffffff;
      line-height: 40rpx;
      &.disable {
        background: rgba(255, 80, 0, 0.3);
      }
    }
  }

  .popup-content-shadow {
    position: relative;
    padding: 24rpx 32rpx 24rpx;
    width: 750rpx;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.8) 39%,
      #ffffff 64%,
      #ffffff 100%
    );
    opacity: 1;
    .popup-content {
      padding: 0;
      background-color: transparent;
    }
  }
  .popup-content {
    padding: 40rpx 32rpx 0;
    background: #fff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    .title {
      font-size: 36rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.9);
      line-height: 50rpx;
    }
    .adr-box {
      margin-top: 40rpx;
      display: flex;
      background: #f9f4f2;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 20rpx 24rpx;
      .adr-info {
        flex: 1;
        .h2 {
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.7);
          line-height: 40rpx;
        }
        .p {
          margin-top: 8rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.5);
          line-height: 34rpx;
        }
      }
      .nav {
        margin-left: 32rpx;
      }
    }
    .phone-box {
      margin-top: 4rpx;
      margin-bottom: 40rpx;
      display: flex;
      background: #f9f4f2;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 20rpx 24rpx;
      .phone-info {
        flex: 1;
        .h2 {
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.7);
          line-height: 40rpx;
          text {
            margin-left: 24rpx;
          }
        }
      }
      .phone {
        margin-left: 32rpx;
      }
    }
    .close-box {
      margin-top: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 120rpx;
      width: calc(100% + 64rpx);
      padding-bottom: env(safe-area-inset-bottom);
      box-sizing: content-box;
      position: relative;
      left: -32rpx;
      background: #ffffff;
      box-shadow: 0rpx 14rpx 58rpx 0rpx rgba(100, 100, 111, 0.2);
      font-size: 28rpx;
      font-weight: 600;
      color: #ff5000;
      line-height: 40rpx;
    }

    .u-content {
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.7);
      text-align: justify;
      line-height: 1.5;
    }
  }
}
</style>
